<!-- 交易——>币币交易 -->
<template>
  <view>
    <!-- 头部 -->
    <BBTradingHeader :coinInfo="coinInfo" @showSidePopup="showSidePopup"></BBTradingHeader>
<!--    <van-tabs-->
<!--        swipeable-->
<!--        shrink-->
<!--        :swipe-threshold="2"-->
<!--        v-model:active="currentIndex"-->
<!--        line-width="20"-->
<!--        line-height="2"-->
<!--        color="#ffbe40"-->
<!--        title-active-color="#000"-->
<!--        title-inactive-color="#000"-->
<!--    >-->
<!--      <van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">-->
<!--      </van-tab>-->
<!--    </van-tabs>-->
    <!-- 内容，订单 -->

    <BBTradingContent v-if="currentIndex == 0" :coinInfo="coinInfo"></BBTradingContent>
<xinxi v-if="currentIndex == 1"></xinxi>
    <!-- 左侧切换币种 -->
    <PublicPopup
      :show="sidePopup"
      @handelClose="sidePopup = false"
      :direction="`left`"
      :height="`100%`"
      :width="`80%`"
      :showHeader="false"
      :empty="false"
    >
      <template #emptyContentCustomize>
        <LeftSide @close="sidePopup = false" :headerList="headerList"></LeftSide>
      </template>
    </PublicPopup>
  </view>
</template>

<script setup>
import BBTradingHeader from './bbTrading/header/index.vue' // BB header部分
import BBTradingContent from './bbTrading/content/index.vue' // BB 内容部分
import PublicPopup from '@/components/Popup/public.vue'
import LeftSide from './common/leftSide.vue'
import { showToast } from 'vant'
import { _t18 } from '@/utils/public'
import { setCollect, removeCollect, getCollect } from '@/api/trade'
import { useTradeStore } from '@/store/trade'
const tradeStore = useTradeStore()
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import Xinxi from "@/pages/trade/components/xinxi.vue";
const $route = useRoute()
const props = defineProps({
  headerList: {
    type: Array
  }
})
const currentIndex = ref(0)
/**
 * 币种信息
 */
// 当前币种信息
const coinInfo = ref({})
// 监听路由展示对应币种信息
watch(
  () => $route.query.symbol,
  (val) => {
    if (tradeStore.spotCoinList.length > 0) {
      coinInfo.value = tradeStore.spotCoinList.filter((item, index) => {
        return item.coin === val
      })[0] || tradeStore.spotCoinList[0]
    }
  },
  {
    deep: true
  }
)
const tabList = [
    {
  title:'交易'
}
,{
  title:'信息'
}
]
// 初始化展示币种信息
const init = () => {
  if (tradeStore.spotCoinList.length > 0) {
    if ($route.query.symbol) {
      coinInfo.value = tradeStore.spotCoinList.filter((item, index) => {
        return item.coin === $route.query.symbol
      })[0]
      if (!coinInfo.value) {
        coinInfo.value = tradeStore.spotCoinList[0]
      }
    } else {
      coinInfo.value = tradeStore.spotCoinList[0]
    }
  }
}
onMounted(() => {
  init()
})

// 监听币种列表加载状态
watch(
  () => tradeStore.spotCoinList.length,
  () => {
    if (tradeStore.spotCoinList.length > 0) {
      init()
    }
  },
  { immediate: true }
)
/**
 * 侧边栏
 */
const sidePopup = ref(false)
const showSidePopup = () => {
  sidePopup.value = true
}
</script>

<style lang="scss" scoped>
.line {
  height: 5px;
  background: var(--ex-div-bgColor10);
}
</style>
